<template>
    <div class="login-container">
        <el-card class="login-card">
            <h2 class="login-title">冲锋号影视后台管理系统</h2>
            <el-form ref="loginForm" :model="passwordLoginData" :rules="loginRules" label-width="100px" size="large">
                <el-form-item label="用户名" prop="username">
                    <el-input style="height:40px;width:100%;border-color:#dcdfe6;border:1px solid #dcdfe6;"
                        v-model="passwordLoginData.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input style="height:40px;width:100%;border-color:#dcdfe6;border:1px solid #dcdfe6;"
                        v-model="passwordLoginData.password" type="password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 210px;margin-left: 32%;" type="primary" @click="submitLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">

import { ref,reactive } from 'vue'
import * as loginMethods from "@/apis/login"
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus';

let passwordLoginData = ref({
  username: "",
  password: "",
  userType: null
});
let loginForm = ref(null)
const router = useRouter()

let loginRules = reactive({
    username:[
    { required: true, message: '账号不能为空', trigger: 'blur' },
    ],
    password:[
    { required: true, message: '密码不能为空', trigger: 'blur' },
    ]
})

// 登录的点击事件
async function submitLogin() {
    loginForm.value.validate(async (valid) => {
        if(valid) {
            loginMethods.doPasswordLogin(passwordLoginData.value)
        }else{
            ElMessage.error('请输入账号和密码后点击登录')
        }
    })
}

</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: linear-gradient(135deg, #7fffd4, #0000cd);
}

.login-card {
    width: 1000px;
}

.login-title {
    text-align: center;
    margin-bottom: 20px;
}

.captcha-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.captcha-container .el-image {
    width: 100px;
    height: 40px;
    cursor: pointer;
}
</style>